﻿//import { Head } from '../index/head.js';
new Vue({
  el: '#main',
  data: {
    timerRead:true,
    timerReader:null,
    recommandTx: [],
    uploadImg: '',
    txImgSrc: '',
    levelSetting: [10, 50, 200, 1000, 5000, 12500, 30000, 99999],
    menu: ['首页', '我的信息', '我的头像', '我的手机', '我的消息'],
    area: 0,
    userObj: localStorage.getItem('userObj') && localStorage.getItem('isLogin') ? JSON.parse(localStorage.getItem('userObj')) : null,
    level: 0,
    expTop: 0,
    scale: 0,
    editNum: 1,
    editType: 1,
    pwdBtn: '修改密码',
    name: localStorage.getItem('userObj') && localStorage.getItem('isLogin') ? JSON.parse(localStorage.getItem('userObj')).name : '',
    lastLogin: localStorage.getItem('userObj') && localStorage.getItem('isLogin') ? JSON.parse(localStorage.getItem('userObj')).lastLogin : null,
    nameText: { state: 0, des: '' },
    username:localStorage.getItem('userObj') && localStorage.getItem('isLogin') ? JSON.parse(localStorage.getItem('userObj')).username : '',
    usernameText: { state: 0, des: '' },
    password: '',
    passwordText: { state: 0, des: '' },
    oldPassword: '',
    oldPasswordText: { state: 0, des: '' },
    passwordSwitch: true,
    message: '',
    toUser: { name: '', id: '' },
    ioSwitch: true,
    socket: null,
    onlineUsers: [],
    onlineArr:[],
    chatUser: { name: '' },
    chatMessage: {
      _id: "",
      history: []
    },
    onlineListItemActive: -1,
    chatGroup: [],
    messageNotice: [{ _id: '', num: 0, message: '' }],
  },
  methods: {
    checkName(prop, value) {
      if (prop == 'name' && (!value || value == '')) return this[prop + 'Text'] = { state: 1, des: '请告诉我你的昵称吧' };
      if (prop == 'name' && !this.checkname(value)) return this[prop + 'Text'] = { state: 1, des: '只能输入汉字、英文、数字' };
      if (prop == 'name' && !this.checkNameLength(value)) return this[prop + 'Text'] = { state: 1, des: '昵称不能超过8个字符哦' };
      if (prop == 'username' && (!value || value == '')) return this[prop + 'Text'] = { state: 1, des: '请告诉我你的新手机号吧' };
      if (prop == 'username' && (value == this.userObj.username)) return this[prop + 'Text'] = { state: 1, des: '和旧手机号一样了哦' };
      if (prop == 'username' && !/^1[3456789]\d{9}$/.test(value)) return this[prop + 'Text'] = { state: 1, des: '手机号码不规范' };
      this.$http.post('/moongoDB/checkName', {
        [prop]: value,
      }).then(resp => {
        this[prop + 'Text'] = resp.body;
      })
    },

    noReadMessage() {
      this.$http.post('/moongoDB/getMessage', {
        id: this.userObj._id
      }).then(resp => {
        if (resp) {
          var chatMessage = resp.body.chatMessage;
          var messageNotice = [];
          chatMessage.map(chat => {
            var id = chat._id;
            chat.history.map(message => {
              if (message.msgType == 0 && message.read == 0) {
                var length = messageNotice.filter(msg => {
                  if (msg._id == id) {
                    msg.num += 1;
                    msg.message = message.content;
                  }
                  return msg._id == id;
                })

                if (length == 0) {
                  messageNotice.push({ _id: id, num: 1, message: message.content });
                }

              }
            })
            this.messageNotice = messageNotice;
          })
        }
      })
    },

    checkPassword(e) {
      if (e.keyCode == 8 || this.password.length >= 6) this.passwordSwitch = false;
      if (this.passwordSwitch) return false;
      if (this.password.length > 16 || this.password.length < 6) this.passwordText = { state: 1, des: '密码由6-16个字符组成哦' };
      else if (this.password == this.userObj.password)
        this.passwordText = { state: 1, des: '新密码不能为旧密码哦' };
      else this.passwordText = { state: 0, des: '' };
    },
    checkOldPasswordBlur(e) {
      if (this.oldPassword.length < this.userObj.password.length && e.keyCode != 8)
        return false;
      else if (this.oldPassword == this.userObj.password) this.oldPasswordText = { state: 0, des: '' }
      else this.oldPasswordText = { state: 1, des: '密码不正确哦亲' }
    },
    checkOldPasswordBlur() {
      if (this.oldPassword == this.userObj.password)
        this.oldPasswordText = { state: 0, des: '' }
      else this.oldPasswordText = { state: 1, des: '密码不正确哦亲' }
    },

    checkPhoneNo(o) {
      var re = /^1[3456789]\d{9}$/;
      if (!re.test(o)) {
        return false;
      } else {
        return true;
      }
    },

    checkname(o) {
      var re = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
      if (!re.test(o)) {
        return false;
      } else {
        return true;
      }
    },

    checkNameLength(o) {
      if (this.strlen(o) > 8) return false;
      else return true;
    },
    // 字符长度
    strlen(str) {
      var len = 0;
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        //单字节加1   
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        }
        else {
          len += 2;
        }
      }
      return len;
    },

    toRegister() {
      if (this.nameText.state == 1 || this.usernameText.state == 1 || this.passwordText.state == 1 || this.rePasswordText.state == 1)
        return false;
      if (!this.checkPhoneNo(this.username)) return this.usernameText = { state: 1, des: '手机号码不存在哦' };
      this.$http.post('/moongoDB/register', {
        name: this.name,
        username: this.username,
        password: this.password,
      }).then(resp => {
        noticeDiv(resp.body, 'success', 2000, function () {
          window.location.href = `/login`;
        });
      })
    },

    changeArea(index) {
      this.area = index;
      if(index==1){
        this.editType = 1;
      }else{
        this.passwordText={des:'',state:0};
        this.password = '';
        this.oldPasswordText={des:'',state:0};
        this.oldPassword = '';
        this.nameText={des:'',state:0};
        this.name = this.userObj.name;
      }
      if (index == 2) {
        this.txImgSrc = this.userObj.imgSrc;
        this.readImgFile();
      }
      if(index==3){
        this.editType = 2;
      }else{
        this.username = this.userObj.username;
        this.usernameText={des:'',state:0};
      }
      if(index==4&&this.timerRead) {
        this.getOnlineUsers();
        this.connectSocket();
        this.timerReader = setInterval(()=>this.noReadMessage(),1000); this.timerRead=false}
       else if(index!=4){this.timerRead=true;clearInterval(this.timerReader)}
    },
    changeEidt() {
      this.editType == 1;
      if (this.editNum == 1) {
        this.editNum = 2;
        this.pwdBtn = '修改昵称';
        this.name = this.userObj.name;
        this.nameText = { state: 0, des: '' };
      }
      else if(this.editNum == 2) {
        this.editNum = 1;
        this.pwdBtn = '修改密码';
        this.password = '';
        this.passwordText = { state: 0, des: '' };
        this.oldPassword = '';
        this.oldPasswordText = { state: 0, des: '' };
        this.passwordSwitch = true;
      }
    },

    levelInit() {
      var exp = this.userObj.exp;
      var length = this.levelSetting.length;
      var expText = '';
      this.levelSetting.map((item, index) => {
        if (index == 0) expText += `if(exp<${item}) {this.level = ${index};this.expTop = ${item};}`
        else if (index == length - 1) expText += `else {this.level = ${index};this.expTop = ${item};} `
        else expText += `else if(exp<${item}) {this.level = ${index};this.expTop = ${item};}`
      })
      eval(expText);
      this.scale = parseFloat(this.userObj.exp / this.expTop);
    },
    sendMessage() {
      if (!this.toUser.name || this.toUser.name == "") {
        this.message = '';
        return noticeDiv('你要发送给谁呢', 'error', 2000);
      }
      else if (!this.message || this.message == "\n") {
        this.message = '';
        return noticeDiv('你要发什么消息呢', 'error', 2000);
      }
      this.socket.emit('sendMessage', {
        toUserName: this.toUser.name, fromUserName: this.userObj.name,
        fromUserId: this.userObj._id,
        message: this.message,
        imgSrc: this.userObj.imgSrc,
      });
      this.message = '';
    },
    connectSocket() {
      if (this.ioSwitch) {
        this.socket = io.connect('http://localhost/');
        this.ioSwitch = false;
        this.socket.on('receiveNotice', (data) => {
          if (data.des.indexOf('收到') != -1) {
            if ($('.onlineListItem')) {
              $('.onlineListItem').each(function () {
                if ($(this).attr('data-name') == data.name) {
                  $(this).click();
                  setTimeout(() => {
                    if ($('#scorllChat')) {
                      $('#scorllChat').scrollTop($('#scorllChat').prop('scrollHeight'));
                    }
                  }, 300)
                }
              })
            }
          }
          noticeDiv(data.des, data.state, 2000);
        });
        this.socket.on('getchatGroup', (data) => {
          if (data._id == this.userObj._id) data.msgType = 1;
          this.chatGroup.push(data);
          setTimeout(() => {
            if ($('#scorllChatGroup')) {
              $('#scorllChatGroup').scrollTop($('#scorllChatGroup').prop('scrollHeight'));
            }
          }, 250);
        });
      }
    },
    logOut() {
      if (!this.userObj.checkAgree) localStorage.removeItem('userObj');
      localStorage.removeItem('isLogin');
      this.userObj.page = 0;
      io.connect('http://localhost/').emit('disconnect');
      noticeDiv('退出成功，请重新登录哦', 'success', 2000, function () { window.location.href = '/login'; });
    },
    toNode() {
      window.open(`/node`, '_blank');
    },
    // 刷新缓存
    refreshUserObj(Obj) {
      var userObj = this.userObj;
      for (key in Obj) {
        userObj[key] = Obj[key];
      }
      localStorage.setItem('userObj', JSON.stringify(userObj));
    },
    saveInfo() {
      var userObj = this.userObj;
      if (this.name == userObj.name && this.editNum == 1&&this.editType == 1) return this.area = 0;
      if (this.username == userObj.username) return this.area = 0;
      if (this.nameText.state == 1 || 
        this.passwordText.state == 1 || 
        this.oldPasswordText.state == 1||
      this.usernameText.state == 1 || 
      (this.password == ''&&this.editType==2&&this.area == 1) || 
      (this.name == ''&&this.editType==1&&this.area == 1)) 
      return false;
      this.$http.post('/moongoDB/editUserInfo', {
        _id: this.userObj._id,
        name: this.name,
        password: this.password,
        editNum: this.editNum,
        exp: this.userObj.exp,
        username: this.username,
        editType:this.editType,
      }).then(resp => {
        var data = resp.body;
        if (data != '') {
          if (data.text.indexOf('昵称') != -1) {
            this.refreshUserObj({ 'name': data.name, 'exp': data.exp });
            noticeDiv(data.text, 'success', 2000, function () {
              location.reload();
            });
          }
          else if (data.text.indexOf('密码') != -1) {
            this.refreshUserObj({ 'password': data.password });
            noticeDiv(data.text, 'success', 2000, function () {
              location.reload();
            });
          }
          else if (data.text.indexOf('手机') != -1) {
            this.refreshUserObj({ 'username': data.username });
            noticeDiv(data.text, 'success', 2000, function () {
              location.reload();
            });
          }
          else noticeDiv(data.text, 'error', 2000);
        }
      })
    },

    readImgFile() {
      this.$http.get('./public/source/data.json').then(response => {
        let res = response.body;
        if (res) {
          this.recommandTx = res.recommandTx;
        }
      }, response => {
        console.log('请求数据失败！');
      });
    },

    rechangeTx(imgSrc) {
      this.txImgSrc = imgSrc;
    },
    changeTx() {
      var imgSrc = this.txImgSrc;
      var userObj = this.userObj;
      if (imgSrc == userObj.imgSrc) return noticeDiv('快去下面更换头像或者上传头像吧', 'info', 3000);
      else if (confirm('你确认要更换头像吗？')) {
        userObj.imgSrc = imgSrc;
        this.$http.post('/moongoDB/changeTx', {
          _id: userObj._id,
          imgSrc: userObj.imgSrc,
        }).then(resp => {
          if (resp.body != '') {
            noticeDiv(resp.body, 'success', 2000, function () {
              location.reload();
            })
            localStorage.setItem('userObj', JSON.stringify(userObj))
          }
        })

      } else { }
    },
    uploadTx() {
      $('#uploadTx').click();
      var that = this;
      $('#uploadTx').change(function () {
        var file = this.files[0];
        var size = parseInt(file.size / 1024);
        var type = file.type;
        if (type.indexOf('image') == -1) return noticeDiv('不能上传其他类型的文件哦', 'error', 2000);
        if (size > 50) return noticeDiv('上传头像大小不能超过50KB', 'error', 2000);
        that.uploadImg = getObjectURL(file);
        setTimeout(() => {
          var width = $('#uploadImg').width();
          var height = $('#uploadImg').height();
          var scale = parseFloat(width) / parseFloat(height);
          if (scale != 1) return noticeDiv('上传头像比例应为1:1', 'info', 2000);
          var formData = new FormData();
          formData.append('uid', that.userObj.uid);
          formData.append('file', file);
          $.ajax({
            type: "POST",
            url: '/moongoDB/uploadTx?action=update_avatar',
            contentType: false,
            //不设置Content-Type请求头
            processData: false,
            // 不处理发送的数据
            data: formData,
            success: function (resp) {
              if (resp != '') {
                if (resp.state == 0) return noticeDiv(resp.des, 'error', 2000);
                else {
                  noticeDiv(resp.des, 'success', 2000);
                  console.log(resp);

                  that.txImgSrc = resp.path;
                }
              }
              else {
                noticeDiv('上传出错请稍后', 'error', 2000);
              }
            },
            error: function (error) {
              noticeDiv(error, 'error', 2000);
            }
          })

        }, 500);

      });
    },

    getOnlineUsers() {
      this.$http.post('/moongoDB/getUsers', {
        online: '在线',
      }).then(resp => {
        if (resp.body != '') {
          if (this.onlineUsers.length == 0) {
            noticeDiv(resp.body.des, resp.body.state, 2000);
          }
          if (resp.body.des.indexOf('成功') != -1) {
            var onlineUsers = resp.body.onlineUsers;
            me = onlineUsers.filter(item => item._id == this.userObj._id)[0];
            var onlineArr = onlineUsers.filter(item=>item.online=='在线'&&item._id != this.userObj._id);
            var noOnlineArr = onlineUsers.filter(item=>item.online=='离线');
            var meArr = onlineUsers.filter(item => item._id == this.userObj._id);
            onlineUsers = Object.values([meArr,onlineArr,noOnlineArr]).reduce((a,b) => [...a, ...b], []);
            this.onlineArr = onlineArr;
            this.onlineUsers = onlineUsers;
          }
        }
      })
    },
    getOnlineUser(item, index) {
      if (item._id == this.userObj._id) return noticeDiv('这是你自己哦', 'info', 2000);
      this.onlineListItemActive = index;
      this.chatUser = item;
      this.toUser.name = item.name;
      this.$http.post('/moongoDB/getChat', {
        id: this.userObj._id,
        toId: item._id,
      }).then(resp => {
        if (resp.body != '') {
          //noticeDiv(resp.body.des,resp.body.state,2000); 
          if (resp.body.des.indexOf('成功') != -1) {
            this.chatMessage = resp.body.chatMessage;
            setTimeout(() => {
              this.noReadMessage(); 
            }, 300);
          } else {
            this.chatMessage = { _id: "", history: [] };
          }
        }
      })
    },
    tochatGroup() {
      this.onlineListItemActive = -1;
      this.toUser.name = '**********';
    },
  },

  created() {
    this.levelInit();
    setTimeout(() => { this.noReadMessage(); }, 200);
    //Head.$on('noReadMessage',data=>{
    //  if(data==1) this.noReadMessage();
    // })
    // 菜单及子页面布局
    $('.info_menu').append(`<li :class="area==index?'active':''" v-for="(item,index) in menu" @click="changeArea(index)">{{item}}</li>`);

    // 首页
    setTimeout(() => $('.progress').width(300 * this.scale), 100);
    $('.info_main li').eq(0).html(`
      <div class="index_info">
        <div class="imgC">
          <img :src="userObj.imgSrc" alt=""/>
        </div>
        <div class="top_msg">
          <span class="name">{{userObj.name}}</span>
          <span class="userType" v-if="userObj.userType==0">普通用户</span>
          <span class="userType admin" v-if="userObj.userType==1" @click="toNode">管理员</span>
          <span class="userType zz" v-if="userObj.userType==10000" @click="toNode">站长</span>
          <span class="uid">UID {{userObj.uid}}</span>
        </div>
        <div class="top_level">
          <div class="levelProgress">
            <div class="level">LV{{level}}</div>
            <div class="progress"></div>
          </div>
          <div class="exp"><span>{{userObj.exp}}</span> / {{expTop}}</div>
          <div class="editInfo" @click="area=1">修改资料</div>
          <div class="editInfo logOut" @click="logOut">退出登陆</div>
        </div>
        <div class="top_bottom">
        <div>该用户在<a>{{userObj.time.split('-')[0]}}年{{userObj.time.split('-')[1]}}月{{userObj.time.split(' ')[0].split('-')[2]}}日{{userObj.time.split(' ')[1].split(':')[0]}}时</a>注册，手机号码为<a>{{userObj.username.slice(0,3)}}****{{userObj.username.slice(7,12)}}</a>，遵守<a>《Z-anime 用户64条规范手册》</a>的规定，是一名<a v-if="userObj.userType==0">普通用户</a><a v-if="userObj.userType==1" >风纪委员</a><a v-if="userObj.userType==10000">站长大人</a>。（最近登录时间 <a>{{userObj.lastLogin}}</a>）</div>
        </div>
      </div>
      <div class="expSetting">
        <div class="title">每日经验</div>
        <div class="expTable">
         <div class="item">
           <div class="itemImg success"><span>5</span> EXP</div>
           <div class="itemText">每日登陆</div>
           <div class="des">5经验已到手</div>
         </div>
         <div class="item">
           <div class="itemImg"><span>5</span> EXP</div>
           <div class="itemText">每日观看视频</div>
           <div class="des no">未完成</div>
         </div>
         <div class="item">
           <div class="itemImg"><span>50</span> EXP</div>
           <div class="itemText">每日评论</div>
           <div class="des no">已获得0/50</div>
         </div>
         <div class="item">
           <div class="itemImg"><span>5</span> EXP</div>
           <div class="itemText">每日分享</div>
           <div class="des no">未完成</div>
         </div>
        </div>
      </div>
    `);

    // 我的信息
    $('.info_main li').eq(1).html(`
       <div class="infoTitle">
        <span class="icon"></span>
        <span class="menuTitle">我的信息</span>
       </div>
       <div class="info_info" :class="['info_info', editNum == 1 ?'':'hide']">
          <div class="title">我的昵称</div>
          <div class="item">
            <div class="prop">昵称:</div>
            <input type="text" :class="['textInput',nameText.state==1?'error':'']" v-model="name" @keyup="checkName('name',name)" />
            <span class="des">注：修改一次昵称花费一点经验</span>
          </div>
          <div class="item">
            <div class="notice">{{nameText.des}}</div>
          </div>
       </div>
       <div :class="['info_info', editNum == 2 ?'':'hide']" style="height:280px">
        <div class="title">我的密码</div>
        <div class="item">
            <div class="prop">旧密码:</div>
            <input type="password" :class="['textInput',oldPasswordText.state==1?'error':'']" v-model="oldPassword" @keyup="checkOldPassword($event)" @blur="checkOldPasswordBlur" />
            <span class="des">注：新密码不能为旧密码</span>
        </div>
        <div class="item" style="margin-bottom:30px">
            <div class="notice">{{oldPasswordText.des}}</div>
          </div>
        <div class="item">
            <div class="prop">新密码:</div>
            <input type="password" :class="['textInput',passwordText.state==1?'error':'']" v-model="password" @keyup="checkPassword($event)" />
            <span class="des">注：密码由6-16字符组成</span>
        </div>
        <div class="item">
            <div class="notice">{{passwordText.des}}</div>
          </div>
      </div>
      <a class="changePwd" @click="changeEidt">{{pwdBtn}}</a>
      <div class="saveWrap">
        <button @click="saveInfo">保存</button>
      </div>
    `);

    // 我的头像
    $('.info_main li').eq(2).html(`
       <div class="infoTitle">
        <span class="icon"></span>
        <span class="menuTitle">我的头像</span>
        <span class="noticeDes" style="margin:12px 40px">注：上传的头像不能超过50K</span>
       </div>
       <div class="info_headImg">
         <div class="imgC">
           <a href="javascript:;" class="showChangeImg defaultBtnImg" @click="changeTx">更换头像</a>
           <img :src="txImgSrc" alt=""/>
           <a href="javascript:;" class="defaultImg defaultBtnImg" @click="uploadTx">本地上传</a>
         </div>
       </div>

       <div class="info_info" style="border:none">
         <div class="title" style="margin-bottom:30px">推荐头像（{{recommandTx.length}}）<span class="noticeDes">注：点击图片更新头像</span></div>
         <div class="info_imgList">
           <div :class="['imgListItem',txImgSrc==item.imgSrc?'select':'']" v-for="item in recommandTx" @click="rechangeTx(item.imgSrc)">
             <img :src="item.imgSrc" alt=""/>
           </div>
         </div>
       </div>
    `);

    // 我的手机
    $('.info_main li').eq(3).html(`
       <div class="infoTitle">
        <span class="icon"></span>
        <span class="menuTitle">我的手机</span>
       </div>
       <div class="info_info">
         <div class="title">我的手机</div>
         <div class="item">
            <div class="prop">手机号码:</div>
            <input type="text" :class="['textInput',usernameText.state==1?'error':'']" v-model="username" @keyup="checkName('username',username)" />
            <span class="des">注：一个手机号只能绑定一个用户</span>
          </div>
          <div class="item">
            <div class="notice">{{usernameText.des}}</div>
          </div>
       </div>
       <div class="saveWrap">
       <button @click="saveInfo">保存</button>
      </div>
    `);

    // 消息中心
    $('.info_main li').eq(4).html(`
       <div class="infoTitle">
        <span class="icon"></span>
        <span class="menuTitle">消息中心</span>
       </div>
       <div class="messageLeft">
        <div class="messageArea">
        <textarea name="" id="messageTextArea" cols="30" rows="10" placeholder="发送消息回车键" @keyup.enter="sendMessage" v-model="message"></textarea />
        <input class="toMessageName" type="text" placeholder="发送给（昵称）" v-model="toUser.name" />
        </div>

        <div class="chatHistory">
          
          <div class="noMessageChat" v-if="chatGroup.length==0&&onlineListItemActive==-1">
            暂无聊天室记录
          </div>

          <div class="messageChatArea" v-if="onlineListItemActive==-1&&chatGroup.length!=0">
            <div class="title">天上人间（{{onlineArr.length+1}}）</div>
            <div class="content" id="scorllChatGroup">
             <div v-for="item in chatGroup">
                <span class="msg right" v-if="item.msgType==1">
                <div class="msgContentC">
                  <div class="other"><span class="time">{{item.time}}</span> {{userObj.name}}</div> 
                  <span class="msgContent">
                  <span class="msgContentTitle">{{item.content}}</span>
                  </span>
                </div>
                <img :src="userObj.imgSrc" alt=""/>
              </span>

                <span class="msg left" v-if="item.msgType==0">
                 <img :src="item.imgSrc" alt=""/>
                 <div class="msgContentC">
                  <div class="other">{{item.name}} <span class="time">{{item.time}}</span></div> 
                  <span class="msgContent">
                    <span class="msgContentTitle">{{item.content}}</span>
                  </span>
                 </div>
                </span>
            </div>
          </div>
          </div>

          <div class="noMessageChat" v-if="chatMessage.history.length==0&&onlineListItemActive!=-1">
            暂无聊天记录
          </div>

          <div class="messageChatArea" v-if="onlineListItemActive!=-1&&chatMessage.history.length!=0">
            <div class="title">与 {{chatUser.name}} 的聊天记录</div>
            <div class="content" id="scorllChat">
             <div v-for="item in chatMessage.history">
                <span class="msg right" v-if="item.msgType==1">
                  <div class="msgContentC">
                  <div class="other"><span class="time">{{item.time}}</span> {{userObj.name}}</div> 
                  <span class="msgContent">
                  <span class="msgContentTitle">{{item.content}}</span>
                  </span>
                  </div>
                <img :src="userObj.imgSrc" alt=""/>
                </span>

                <span class="msg left" v-if="item.msgType==0">
                <img :src="chatUser.imgSrc" alt=""/>
                <div class="msgContentC">
                  <div class="other">{{chatUser.name}} <span class="time">{{item.time}}</span></div> 
                  <span class="msgContent">
                    <span class="msgContentTitle">{{item.content}}</span>
                  </span>
                </div>
                </span>
             </div>
            </div>
          </div>

          
         </div>
        </div>
       </div>


       <div class="messageRight">
         <div class="messageTitle" @click="getOnlineUsers" title="点我刷新">在线人数（{{onlineArr.length+1}}）</div>

         <div class="onlineList">
           <div @click="getOnlineUser(item,index1)" :class="['onlineListItem',onlineListItemActive==index1?'active':'']" v-for="(item,index1) in onlineUsers" :data-name="item.name" :data-on="onlineListItemActive==index1?'1':'0'">
            <div class="imgC userImg">
              <img :src="item.imgSrc" alt=""/>
              <span v-for="notice in messageNotice">
               <span class="messageNotice" style="top:12px;right:6px;z-index:1000" v-if="notice._id==item._id">{{notice.num}}</span>
              </span>
            </div>
            <div class="userInfoOnline">
              <div class="userNameOnline" >
              {{item.name}} 
               <span class="cff" v-if="item.userType==0">普通用户</span>
               <span class="pur" v-if="item.userType==1">管理员</span>
               <span class="red" v-if="item.userType==10000">站长</span>
               <span  v-for="(arr,index2) in levelSetting" v-if="item.exp>=arr&&item.exp<=levelSetting[index2+1]">
                <span :class="'levelSpan level'+ parseInt(index2+ 1)">LV{{index2+1}}</span>
               </span>
              <span v-if="item.exp<10">
                 <span class="levelSpan level0">LV0</span>
              </span>
              </div>
              <div class="others">
               <span :class="item.online=='在线'?'bgGreen':'bgGrey'"></span>
               <span style="display:inline-block" v-for="notice in messageNotice">
                <span class="noticeMsg" v-if="notice._id==item._id">{{notice.message}}</span>
               </span>
              </div>
            </div>   
           </div>
         </div>
         <div class="messageTitle" @click="getOnlineUsers" title="点我刷新">在线多人聊天</div>
         <div style="height:150px;" class="chatGroup onlineList">
            <div :class="['onlineListItem',onlineListItemActive==-1?'active':'']" @click="tochatGroup">
            <div class="imgC" >
              <img src="../public/img/index/tx/tslj.jpg" alt=""/>
            </div>
            <div class="userInfoOnline">
              <div class="userNameOnline">天上人间 </div> 
              <div class="others"><span class="green">{{onlineArr.length+1}}人在线</span></div>
              </div>
            </div>
         </div>
       </div>
    `);




  },
  mounted () {
    
  },
  updated() {
    if (this.area == 0) setTimeout(() => $('.progress').width(300 * this.scale), 100);
    if ($('#scorllChat')) setTimeout(()=>{$('#scorllChat').scrollTop($('#scorllChat').prop('scrollHeight'))},30);
  },
});